<template>

    <div>
        <div id="companyEcharts"></div>
    </div>

</template>


<script>
    import {Api} from '../../../../api/index.js'
    import echarts from 'echarts'
    export default {
        name: "company",

        data() {
            return {
                chart: null,
                //标题
                name: [],
                opinionData: [],
            }
        },
        mounted() {
            this.selectCertificateIssued();
        },
        methods:{
            selectCertificateIssued() {
                let url = Api.countActivityWork;
                this.$http.get(url+"/2").then((res) => {
                    this.name = [];
                    this.opinionData = [];
                    res.data.data.map(item => {
                        this.name.push(item.company);
                        this.opinionData.push(item.count);

                    });
                    this.drawPie()
                });

            },
            drawPie() {
                this.chart = echarts.init(document.getElementById('companyEcharts'));
                this.chart.setOption({
                    title: {
                        text: '活动作品数量统计',
                        left: 'center',

                        textStyle: {
                            fontSize: 24,
                            fontFamily: 'Helvetica',
                            fontWeight: 400
                        }
                    },
                    tooltip: {},

                    xAxis: {
                        show:false,
                        data: this.name,
                        axisLabel: {
                            interval: 0,
                            formatter:function(value)
                            {
                                return value.split("").join("\n");
                            }
                        }

                    },
                    yAxis: {
                        name:'数量'
                    },
                    series: [{
                        name: '活动作品数量统计',
                        type: 'bar',
                        data: this.opinionData,
                    }]
                });
                this.chart.on('click',function (param) {
                    console.log(param.name);
                })
            }
        }
    }
</script>

<style scoped>
    #companyEcharts {
        position: relative;
        left: 50%;
        margin-left: -400px;
        margin-bottom: 70px;
        width: 800px;
        height: 600px;
        border-radius: 10px;
    }
</style>